<template>
    <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
    import echarts from "echarts";

    require("echarts/theme/macarons"); // echarts theme

    const animationDuration = 6000;

    export default {
        props: {
            className: {
                type: String,
                default: "chart"
            },
            width: {
                type: String,
                default: "100%"
            },
            height: {
                type: String,
                default: "210px"
            },
            chartData: {
                type: Object
            }
        },
        data() {
            return {
                chart: null
            };
        },
        mounted() {
            this.initChart(this.chartData.date, this.chartData.value);
            this.__resizeHanlder = this.debounce(() => {
                if (this.chart) {
                    this.chart.resize();
                }
            }, 100);
            window.addEventListener("resize", this.__resizeHanlder);
        },
        beforeDestroy() {
            if (!this.chart) {
                return;
            }
            window.removeEventListener("resize", this.__resizeHanlder);
            this.chart.dispose();
            this.chart = null;
        },
        methods: {
            debounce(func, wait, immediate) {
                let timeout, args, context, timestamp, result

                const later = function() {
                    // 据上一次触发时间间隔
                    const last = +new Date() - timestamp

                    // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
                    if (last < wait && last > 0) {
                        timeout = setTimeout(later, wait - last)
                    } else {
                        timeout = null
                        // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
                        if (!immediate) {
                            result = func.apply(context, args)
                            if (!timeout) context = args = null
                        }
                    }
                }
            },
            initChart(date, value) {
                this.chart = echarts.init(this.$el, "macarons");

                this.chart.setOption({
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "line" // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: 30,
                        left: "2%",
                        right: "2%",
                        bottom: "3%",
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        data: date,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }],
                    yAxis: [{
                        type: "value",
                        axisTick: {
                            show: true
                        }
                    }],
                    legend: {
                        x: '5%',
                        top: '0%',
                        data: ["销量Top10"]
                    },
                    calculable: true,
                    series: [{
                            name: "销量Top10",
                            itemStyle: {
                                normal: {
                                    color: "#7BBCE8"
                                }
                            },
                            type: "bar",
                            stack: "vistors",
                            barWidth: "50%",
                            data: value,
                            animationDuration: 2800,
                            animationEasing: "quadraticOut"
                        }
                    ]
                });
            }
        },
        watch: {
            chartData: {
                deep: true,
                handler(val) {
                    this.initChart(val.date, val.value);
                }
            }
        }
    };
</script>
